<template>
   <div class="zb-box">

        <div class="box">
          <span class="name">
            <span class="ico"><img src="../../../../static/img/p1.png" alt=""></span>
            <span class="text t1">郑州</span>
          </span>
          <span class="num num1"><i>{{formatNumberRgx(1420853)}}</i>万元</span>
          <span class="num num2">86.87%</span>
          <span class="bico"><img src="../../../../static/img/p01.png" alt=""></span>
        </div>

        <div class="box">
          <span class="name">
            <span class="ico"><img src="../../../../static/img/p2.png" alt=""></span>
            <span class="text t2">南宁</span>
          </span>
          <span class="num num1"><i>{{formatNumberRgx(206228)}}</i>万元</span>
          <span class="num num2">12.61%</span>
          <span class="bico"><img src="../../../../static/img/p02.png" alt=""></span>
        </div>

       <div class="box">
         <span class="name">
           <span class="ico"><img src="../../../../static/img/p3.png" alt=""></span>
           <span class="text t3">呼和浩特</span>
         </span>
         <span class="num num1"><i>{{formatNumberRgx(3470)}}</i>万元</span>
         <span class="num num2">0.21%</span>
         <span class="bico"><img src="../../../../static/img/p03.png" alt=""></span>
       </div>

       <div class="box">
         <span class="name">
           <span class="ico"><img src="../../../../static/img/p4.png" alt=""></span>
           <span class="text t4">银川</span>
         </span>
         <span class="num num1"><i>{{formatNumberRgx(2800)}}</i>万元</span>
         <span class="num num2">0.17%</span>
         <span class="bico"><img src="../../../../static/img/p04.png" alt=""></span>
       </div>

       <div class="box">
         <span class="name">
           <span class="ico"><img src="../../../../static/img/p5.png" alt=""></span>
           <span class="text t5">乌鲁木齐</span>
         </span>
         <span class="num num1"><i>{{formatNumberRgx(2204)}}</i>万元</span>
         <span class="num num2">0.13%</span>
         <span class="bico"><img src="../../../../static/img/p05.png" alt=""></span>
       </div>
   </div>
</template>

<script>
  export default {
    name: 'zhanbi',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {
        this.getEchartData()
    },
    methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      getEchartData() {
        const chart1 = this.$refs.yuan;
        if (chart1) {
          const myChart = this.$echarts.init(chart1)
          var that = this;

          const option = {};
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      }
    }
   }
</script>

<style scoped>
  .zb-title{
    width:100%;
    height:.3rem;
    background:url(../../../../static/img/geyuanquyewuliang.png) no-repeat left center;
    color: #ffffff;
    line-height:.3rem;
    font-size:.16rem;
    padding-left:.10rem;
  }
  .zb-box{

    width: 100%;
     background-size: 100% 100%;
  }
  .zb-box .title{
    text-align:right;
    color:#0ac2dd;
    padding:.1rem 0;
    height:.2rem;
    line-height:.16rem;
    font-size:.12rem;
  }
  .zb-box .box{
    display: flex;
    justify-content: space-between;
     background: linear-gradient(to right, rgba(6,48,90,0.3) rgba(14,109,204,1)); /* 标准的语法 */
    height:.3rem;
   align-items: center;
   padding-right:.1rem;
    color:#0ac2dd;
    margin-bottom: .1rem;
    font-size:.14rem;
    line-height:.3rem;
  }
  .zb-box .box .text{
    padding-left:.05rem;
  }
  .zb-box .name{
    width:25%;
    text-indent: .2rem;
  }
  .zb-box .t1{
    color:#28e9eb;
  }
  .zb-box .t2{
    color:#f19725;
  }
  .zb-box .t3{
    color:#22c08e;
  }
  .zb-box .t4{
    color:#8658d5;
  }
  .zb-box .t5{
    color:#d26d87;
  }
  .zb-box .num1{
     width:25%;
      text-align: right;
    color:#20acbf;
    font-size:.12rem;
  }
   .zb-box .num1 i{
     font-size:.14rem;
     font-weight: bold;
   }
  .zb-box .num2{
     width:25%;
     text-align: right;
    color:#20acbf;
  }
  .zb-box .bico{
    color:#25d4fc;
  }
  .zb-box .bico img{
    width:0.2rem;
    height:.2rem;
  }
  .yuan{
    width:50%;
    height:50%;

    float:left;
  }
</style>
